<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{title}}</h2>
      <h2>msg={{msg}}</h2>
      <p>
        <input type="text" v-model.lazy.number.trim="msg" />
      </p>
      <p>
        <input type="text" :value="msg" @input="changeMsg" />
      </p>
      <div>
        <input type="checkbox" id="agree" v-model="agree" />
        <label for="agree">请先同意我们的条款后再注册--{{agree}}</label>
      </div>
      <div>
        <input type="checkbox" id="game" value="Game" v-model="hobbys" />
        <label for="game">Game</label>
        <input type="checkbox" id="travel" value="Travel" v-model="hobbys" />
        <label for="travel">Travel</label>
        <input type="checkbox" id="sleep" value="Sleep" v-model="hobbys" />
        <label for="sleep">Sleep</label>
        <span>我们的爱好是 : {{hobbys}}</span>
      </div>
      <div id="example-4">
        <input type="radio" id="man" value="1" v-model="picked" />
        <label for="man">男性</label>
        <br />
        <input type="radio" id="female" value="2" v-model="picked" />
        <label for="female">女性</label>
        <br />
        <input type="radio" id="nomale" value="3" v-model="picked" />
        <label for="nomale">变性</label>
        <br />
        <span>性别选择: {{ picked }}</span>
      </div>
      <div>
        <h2>请选择打算去玩的城市:</h2>
        <select v-model="choose">
          <option value="" disabled>请选择</option>
          <option :value="l.code" v-for="(l,i) in cities" :key="i">
            {{l.name}}
          </option>
        </select>
        <div>你的选择是: {{choose}}</div>
      </div>
      <div>
        <input
          type="checkbox"
          v-model="toggle"
          :true-value="yes"
          :false-value="no"
        />
        <p>toggle=={{toggle}}</p>
      </div>
      <div>
        <input type="radio" v-model="pick" v-bind:value="a" /> 猫
        <input type="radio" v-model="pick" :value="b" /> 狗
        <input type="radio" v-model="pick" :value="c" /> 猪
        <h2>pick =- {{pick}}</h2>
      </div>
    </div>

    <script>
      const vm = new Vue({
        data: {
          title: "v-model 数据双向绑定 ",
          msg: "Are you OK?",
          agree: true,
          hobbys: [],
          picked: "3",
          cities: [
            {
              name: "北京",
              code: "BJ",
            },
            {
              name: "成都",
              code: "CD",
            },
            {
              name: "武汉",
              code: "WH",
            },
            {
              name: "上海",
              code: "SH",
            },
            {
              name: "拉萨",
              code: "LS",
            },
          ],
          choose: "",
          toggle: "no",
          yes: "今天晚上我们看咒怨",
          no: "我们晚上看爱情片...",
          pick: "",
          a: "cat",
          b: "dog",
          c: "pig",
        },
        mounted() {
          document.getElementsByTagName("title")[0].innerHTML = this.title;
        },
        methods: {
          changeMsg(e) {
            this.msg = e.target.value;
          },
        },
      }).$mount("#app");

      //   var userInfo = {
      //     username: "zuozuomu",
      //   };

      //   Object.defineProperty(userInfo, "username", {
      //     get() {
      //       // 取值
      //       console.log("你读取了 userInfo - username ");
      //       // console.log(userInfo.username)
      //     },
      //     set(v) {
      //       console.log("你修改了 userInfo - username" + v);
      //     },
      //   });
    </script>
    <!-- 
        v-model  用于绑定 input 和 textarea 的 value  输入框 

        语法糖

        它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理


        v-model 实现数据双向绑定
        view  视图层   修改视图(input 事件)  v-model 会自动去更新对应的 数据(model)
        model 数据层   修改数据  通过js修改数据 v-model 会自动的去更新 数据对应的 视图 (view)

        Vue 不是一个真正的MVVM模式的 框架 ,只是借鉴了 MVVM 部分精华和优点

        设计模式   
        MVC        angularJS  
        M  model 数据层
        V  view  视图层
        C  controller 控制器层   

        MVVM   
        M  model 数据层
        V  views 视图层
        VM viewmodel  数据视图对象  

        MVP  
        M  model 数据层
        V  views 视图层
        P  presenter  逻辑层  (js逻辑处理代码+方法)

        v-model 的底层原理   语法糖
        Object.defineProperty()  进行数据劫持  (监听数据改变 从而触发修改视图的逻辑函数)  (监听输入框输入事件 从而修改对应的数据)

        它会根据控件类型自动选取正确的方法来更新元素  
        v-model 本质上不过是语法糖 ( 包含大量逻辑代码块集合)
        负责监听用户的输入事件以更新数据

        text 和 textarea 元素使用 value 属性和 input 事件
        checkbox 和 radio 使用 checked 属性和 change 事件    
        select 字段将 value 作为 prop 并将 change 作为事件   $("#select").prop()

        v-model 也有修饰符 
        lazy    input 变为 change 延迟触发 
        trim    去除首尾空格
        number  用户的输入值转为数值类型


        在组件上使用 v-model

     -->
  </body>
</html>
